<template>

	<div class="main">
		<el-row :gutter="0" style="margin-top: 0.625rem;">
			<el-col :xs="{span:24}" :sm="{span:24}" :md="{span:16}" :lg="{span:16}" :xl="{span:16}">
				<div class="grid-content" style="margin:0 40px 0 40px">
					<el-card class="box-card card-list" shadow="never" v-loading='list_loading'
						element-loading-text="拼命加载资源中" element-loading-background="rgba(255, 255, 255, 1)">
						<template #header>
							<div class="card-header">
								<span style="margin: -2px 0 0 5px;">资源详情</span>
								<!-- <el-button class="button" type="text">操作按钮</el-button> -->
							</div>
						</template>
						<el-scrollbar>
							<div class="det-main" v-show="!list_loading">
								<div class="det-main-img">
									<img width="100" height="100" :src="cardDetail.icon" />
								</div>
								<div class="det-main-title">
									{{cardDetail.recommendName}}
								</div>
								<div>
									<el-tag class="det-action-tag tags" v-for="(tag,index) in cardDetail.tag"
										:key="index" type="info">
										{{tag}}
									</el-tag>
								</div>
								<div style="user-select: none;">
									<el-tag class="det-action-tag" size="small" type="info" effect="dark">
										<span class="det-action-tag"><i class="el-icon-view"></i></span>
										<span class="det-action-tag">{{cardDetail.viewNumber}}</span>
									</el-tag>
									<!-- 主资源收藏 -->
									<el-tag class="det-action-tag" size="small" type="danger" effect="dark"
										@click="handleClickCollect(cardDetail.recommendId)">
										<span class="det-action-tag">
											<i class="el-icon-star-off" v-if="cardDetail.hasCollect===false"></i>
											<i class="el-icon-star-on" v-else></i>

										</span>
										<span class="det-action-tag">{{cardDetail.collectNumber}}</span>
									</el-tag>
									<el-tag class="det-action-tag" size="small" effect="dark"
										@click.nativ="handleCpoy(cardDetail.recommendId)">
										<span class="det-action-tag"><i class="el-icon-share"></i></span>
										<span class="det-action-tag">分享</span>
									</el-tag>
								</div>

								<div class="det-main-content">
									{{cardDetail.content}}
								</div>
							</div>
							<el-divider></el-divider>
							<div class="det-extra" v-show="!list_loading">
								<table>
									<tbody>
										<tr>
											<td>
												<span>链接：</span>
												<span style="color: #409eff;">{{cardDetail.link}}</span>
												<span>
													<el-tooltip class="item" effect="dark" content="复制" placement="top">
														<i class="el-icon-document-copy det-copy"
															@click.native="copyLink()">

														</i>
													</el-tooltip>

												</span>
											</td>
										</tr>
										<tr>
											<td>
												<span>详情：</span>
												<span>{{cardDetail.description}}</span>
											</td>
										</tr>
										<tr>
											<td>
												<span>时间：</span>
												<span>{{cardDetail.recommendTime}}</span>
											</td>
										</tr>
										<tr>
											<td>
												<span>推荐人：</span>
												<span style="display: flex;align-items:center;">
													<el-avatar :src="cardDetail.userInfo.portrait">
													</el-avatar>
													<span>{{cardDetail.userId}}</span>
												</span>

											</td>
										</tr>
									</tbody>
								</table>
							</div>
						</el-scrollbar>
					</el-card>

				</div>
			</el-col>

			<el-col :xs="{span:24}" :sm="{span:24}" :md="{span:8}" :lg="{span:8}" :xl="{span:16}">
				<div class="grid-content" style="margin:0 40px 0 40px">
					<el-card class="box-card card-list" shadow="never" v-loading='list_loading'
						element-loading-text="拼命加载资源中" element-loading-background="rgba(255, 255, 255, 1)">
						<template #header>
							<div class="card-header">
								<span style="margin: -2px 0 0 5px;">相似推荐</span>
								<!-- <el-button class="button" type="text">操作按钮</el-button> -->
							</div>
						</template>
						<el-empty description="暂无相关资源推荐~" v-show="emptyView">
						</el-empty>
						
						<el-scrollbar max-height="500px">
							<el-card v-for="(similarItem, index) in similarList" :key="index"
								class="card_child card-list-item" shadow="hover" :body-style="{ padding: '20px'}"
								v-show="!list_loading">

								<template #header>
									<a target="_blank" :href="'http://localhost:3000/detail?rid='+similarItem.recommendId">
										<img width="64" height="64" :src="similarItem.icon" class="image" />
										<div>
											<span class="home_card_title"
												style="font-size: 18px;">{{similarItem.recommendName}}</span>
											<div class="bottom">
												<div class="home_card_content">
													{{similarItem.description}}
												</div>
												<!-- 标签模块 -->
												<div>
													<span v-for="tag in similarItem.tag">
														<el-tag class="tag-style" type="info">
															{{tag}}
														</el-tag>
													</span>
												</div>
											</div>
										</div>
									</a>
								</template>
								<el-button-group>
									<!--访问按钮 -->
									<el-tooltip class="item" effect="dark" content="直接访问" placement="top-start">
										<el-button icon="el-icon-paperclip" @click="handleLink(similarItem.link)">
										</el-button>
									</el-tooltip>
									<!-- 分享按钮 -->
									<el-tooltip class="item" effect="dark" content="分享" placement="top-start">
										<el-button icon="el-icon-share" @click="handleCpoy(similarItem.recommendId)">
										</el-button>
									</el-tooltip>
									<!-- 收藏按钮 -->
									<el-tooltip class="item" effect="dark" content="收藏" placement="top-start"
										v-if="similarItem.hasCollect===false">
										<el-button :data-id="similarItem.recommendId" ref="collect"
											icon="el-icon-star-off" @click="handleClick(similarItem.recommendId,index)">
											{{similarItem.collectNumber}}
										</el-button>
									</el-tooltip>
									<!-- 取消收藏按钮 -->
									<el-tooltip class="item" effect="dark" content="取消收藏" placement="top-start" v-else>
										<el-button :data-id="similarItem.recommendId" ref="collect"
											icon="el-icon-star-on" type="warning"
											@click="handleClick(similarItem.recommendId,index)">
											{{similarItem.collectNumber}}
										</el-button>
									</el-tooltip>
								</el-button-group>
							</el-card>
						</el-scrollbar>
					</el-card>

				</div>
			</el-col>		
		</el-row>
		<el-row style="justify-content: center;align-items: center;">
			<div style="font-size: 14px;height: 40px;display: flex;justify-content: center;align-items: center;">
				{{myInfo}}
			</div>
		</el-row>
		<el-backtop />
	</div>


</template>

<script>
	import Qs from 'qs';
	export default {
		created() {
			
			// this.rid = this.$route.query.rid;
			this.getDetail(this.$route.query.rid);
			// this.openFullScreen(3000);
			// console.log(this.$route.query.rid);

			// console.log(JSON.stringify(this.cardList));
		},
		data() {
			return {
				rid: '',
				emptyView:false,
				collectList: [],
				cardDetail: {
					userInfo: {
						portrait: '',
					},
				},
				similarList: [],
				list_loading: true,
				myInfo: '© 2021 编程科技导航 | 页面设计＆前端开发 by 软工195 ZY',

			}
		},
		methods: {
			getDetail(rid) {
				let that = this;
				// console.log('rid',rid);
				this.$axios({
					url: 'http://localhost:8080/findResource/getInfoByRecommendId',
					method: 'post',
					transformRequest: [function(data) {
						// 对 data 进行任意转换处理
						return Qs.stringify(data);
					}],
					headers: {
						'Content-Type': 'application/x-www-form-urlencoded',
						'token': localStorage.pg_token
					},
					data: {
						userId:localStorage.pg_username,
						recommendId: rid,
					},
					transformResponse: [function(data) {
						// 对接收的 data 进行任意转换处理
						let result = JSON.parse(data);
						if (result.code === 200) {
							that.cardDetail = result.data.detail;
							// console.log(that.cardDetail.userInfo.portrait);
							that.similarList = result.data.similar;
							if(that.similarList === null) {
								that.emptyView = true;
							}
							// console.log(that.similarList)
						} else {
							that.$message.warning(result.msg);
						}
						that.list_loading = false;
						return data;
					}],
				}).catch(function(error) {
					if (error.response) {
						// 请求成功发出且服务器也响应了状态码，但状态代码超出了 2xx 的范围
						that.$message.error("服务器响应出错，请稍后再试");
						// console.log(error.response.data);
						// console.log(error.response.status);
						// console.log(error.response.headers);
					} else if (error.request) {
						// 请求已经成功发起，但没有收到响应
						// `error.request` 在浏览器中是 XMLHttpRequest 的实例，
						// 而在node.js中是 http.ClientRequest 的实例
						that.$message.error("请求服务器错误或超时,请稍后再试");
					} else {
						// 发送请求时出了点问题
						that.$message.error("发送请求出现问题，请稍后再试");
					}
				});
			},

			handleClick(tab, event) {
				console.log(tab, event)
			},
			openFullScreen(time) {
				const loading = this.$loading({
					lock: true,
					text: 'Loading',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});
				setTimeout(() => loading.close(), time)
			},
			handleLink(url) {
				window.open(url, '_blank');
			},
			copyLink() {
				let linkText = this.cardDetail.link;
				// console.log(linkText);
				this.$copyText(linkText).then(
					(e) => {
						this.$message.success("复制链接成功");
						// console.log(e) // {action: "copy", text: "Hello World", trigger: button, clearSelection: ƒ}
					},
					(e) => {
						this.$message.error("抱歉，复制失败！")
					})
			},
			getRootPath() {
			    //获取当前网址，如： http://localhost:8088/test/test.jsp
			    let curPath = window.document.location.href;
			    //获取主机地址之后的目录，如： test/test.jsp
			    let pathName = window.document.location.pathname;
			    let pos = curPath.indexOf(pathName);
			    //获取主机地址，如： http://localhost:8088
			    let localhostPath = curPath.substring(0, pos);
			    //获取带"/"的项目名，如：/test
			    let projectName = pathName.substring(0, pathName.substr(1).indexOf('/') + 1);
			    return (localhostPath);//发布前用此4
			},
			handleCpoy(id) {
				//根据规则生成链接
				let copyText = "我在编程科技导航发现了一个精品资源，这是链接：" + this.getRootPath()+'/detail?rid='+id + "，快来看看吧~";
				this.$copyText(copyText).then(
					(e) => {
						this.$message.success("已复制链接，快去分享吧~");
						// console.log(e) // {action: "copy", text: "Hello World", trigger: button, clearSelection: ƒ}
					},
					(e) => {
						this.$message.error("抱歉，复制失败！")
					})
			},
			handleClickCollect(rid){
				let that = this;
				// console.log('rid',rid);
				this.$axios({
					url: 'http://localhost:8080/findResource/collectResource',
					method: 'get',
					transformRequest: [function(data) {
						// 对 data 进行任意转换处理
						return data;
					}],
					headers: {
						'token': localStorage.pg_token
					},
					params: {
						userId:localStorage.pg_username,
						recommendId: rid,
					},
					transformResponse: [function(data) {
						// 对接收的 data 进行任意转换处理
						let result = JSON.parse(data);
						if (result.code === 200) {
							that.cardDetail.hasCollect = result.data.hasCollect;
							that.cardDetail.collectNumber = result.data.collectNumber;
							
							// if (that.cardDetail.hasCollect === false) {
							// 	that.cardDetail.collectNumber -= 1;
							// } else {
							// 	that.cardDetail.collectNumber += 1;
							// }
							
							
							that.$message.success(result.data.msg);
						} else {
							that.$message.error(result.msg);
						}
						that.list_loading = false;
						return data;
					}],
				}).catch(function(error) {
					if (error.response) {
						// 请求成功发出且服务器也响应了状态码，但状态代码超出了 2xx 的范围
						that.$message.error("服务器响应出错，请稍后再试");
						// console.log(error.response.data);
						// console.log(error.response.status);
						// console.log(error.response.headers);
					} else if (error.request) {
						// 请求已经成功发起，但没有收到响应
						// `error.request` 在浏览器中是 XMLHttpRequest 的实例，
						// 而在node.js中是 http.ClientRequest 的实例
						that.$message.error("请求服务器错误或超时,请稍后再试");
					} else {
						// 发送请求时出了点问题
						that.$message.error("发送请求出现问题，请稍后再试");
					}
				});				
			},
			handleClick(rid, index) {
				let that = this;
				// console.log('rid',rid);
				this.$axios({
					url: 'http://localhost:8080/findResource/collectResource',
					method: 'get',
					transformRequest: [function(data) {
						// 对 data 进行任意转换处理
						return data;
					}],
					headers: {				
						'token': localStorage.pg_token
					},
					params: {
						userId:localStorage.pg_username,
						recommendId: rid,
					},
					transformResponse: [function(data) {
						// 对接收的 data 进行任意转换处理
						let result = JSON.parse(data);
						if (result.code === 200) {
							that.similarList[index].hasCollect = result.data.hasCollect;							
							that.similarList[index].collectNumber = result.data.collectNumber;								
							// console.log(that.similarList[index].collectNumber);
							that.$message.success(result.data.msg);
						} else {
							that.$message.error(result.msg);
						}
						return data;
					}],
				}).catch(function(error) {
					if (error.response) {
						// 请求成功发出且服务器也响应了状态码，但状态代码超出了 2xx 的范围
						that.$message.error("服务器响应出错，请稍后再试");
						// console.log(error.response.data);
						// console.log(error.response.status);
						// console.log(error.response.headers);
					} else if (error.request) {
						// 请求已经成功发起，但没有收到响应
						// `error.request` 在浏览器中是 XMLHttpRequest 的实例，
						// 而在node.js中是 http.ClientRequest 的实例
						that.$message.error("请求服务器错误或超时,请稍后再试");
					} else {
						// 发送请求时出了点问题
						that.$message.error("发送请求出现问题，请稍后再试");
					}
				});		
				// this.similarList[index].hasCollect = !this.similarList[index].hasCollect;
			}		
		}
	}
</script>


<style scoped>
	/* .ranking-list-item{
		background-color: #eaeaea;
	} */
	html,
	body {
		font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB',
			'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
	}

	td {
		padding-bottom: 1rem;
		display: flex;
		align-items: center;
	}


	a {
		text-decoration: none;
		background-color: transparent;
		outline: none;
		cursor: pointer;
		transition: color .3s;
	}

	.tag-style {
		margin: 0 0.3125rem 0.3125rem 0;
		border-radius: 0.3125rem;

	}

	.tag-speciall-style {
		font-weight: 600;
		font-family: '微软雅黑';
	}

	.det-extra {}

	.det-main-content {
		font-size: 0.875rem;
		margin: 0.625rem 0 1.5625rem 0;
	}

	.det-action-tag {
		margin: 0.5rem 0.3125rem 0.5rem 0;
		cursor: pointer;
	}

	.tags {
		color: #525252;
	}

	.det-copy {
		color: #409eff;
		margin-left: 0.3125rem;
		cursor: pointer;
	}

	.det-main {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	.det-main-img {}

	.det-main-title {
		font-size: 1.5rem;
		font-weight: 600;
	}

	.card-page {
		width: -webkit-fill-available;
		cursor: default !important;
		margin: 0 0.9375rem 0 0.9375rem;
		border-radius: 0.3125rem;
	}

	.pageHeadr {
		background: #fff;
		border: 1px solid var(--el-border-color-base);
		box-shadow: 0 2px 4px 0 rgb(0 0 0 / 12%), 0 0 6px 0 rgb(0 0 0 / 4%);
		height: 70px;


	}

	.ranking_readNum {
		margin: -5px 0 0 15px;
		color: #999999;
		font-size: 14px;
		float: right;
	}

	.home_card_title {
		color: #000000;
	}

	.card_child:hover .home_card_title {
		color: #0D84FF;
		font-weight: 500;
		transition: .1s;
	}

	.card-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		justify-content: center;
		font-size: 18px;
	}

	.bottom {
		padding: -5px;
	}

	.card-list {
		margin-top: 0px !important;
		height: 100%;
		box-sizing: border-box;
		cursor: default !important;
		text-align: left;
	}

	.home_card_content {
		/* padding: 10px; */
		color: #999999;
		font-size: 14px;
		text-align: left;
		margin-bottom: 1rem;
		display: -webkit-box;
		overflow: hidden;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
	}


	.card-list-item {
		margin: 15px;
	}

	.pageTabs {
		text-align: left;
		margin: 0 15px 0 15px;
	}

	.el-page-header {
		height: 100%;
		align-items: center;
	}


	.main {
		/* height: 500px; */
		/* display: flex; */
		justify-content: center;
		align-items: center;
		flex-direction: column;
		width: 100%;
		height: 100%;
		/* background: #f3f3f3; */
		box-sizing: border-box;
	}

	.error-page {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		width: 100%;
		height: 100%;
		background: #f3f3f3;
		box-sizing: border-box;
	}

	.error-code {
		line-height: 1;
		font-size: 250px;
		font-weight: bolder;
		color: #2d8cf0;
	}

	.error-code span {
		color: #00a854;
	}

	.error-desc {
		font-size: 30px;
		color: #777;
	}

	.error-handle {
		margin-top: 30px;
		padding-bottom: 200px;
	}

	.error-btn {
		margin-left: 100px;
	}
</style>
